<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<!--页面完全加载好之前显示的加载动画效果-->
		<link rel="stylesheet" href="commonCSS/CSSLoadingAnimation01.css" type="text/css" />
		<!--初始化css样式引入的css文件-->
		<link rel="stylesheet" href="commonCSS/commonInitialize.css" type="text/css" />
		<link rel="stylesheet" href="commonCSS/htmlFontSize.css" />
		<link rel="stylesheet" href="commonCSS/commonDisplayFlex.css" />
		<!--HTML页面顶部盒子header区域的通用样式文件-->
		<link rel="stylesheet" type="text/css" href="commonCSS/headerCommon.css" />
		<link rel="stylesheet" href="commonCSS/take-order-nav-bar.css" />
		<link rel="stylesheet" href="commonCSS/footerCommon.css" />
		<link rel="stylesheet" href="css-look-my-order/look-my-order.css" />
		<!--字体图标库引入-->
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
		<script type="text/javascript">
			
			window.addEventListener("load", function() {
				document.getElementsByClassName("loading1")[0].remove();
				/*整个网页加载好后（包括图片等），就移除这个动画元素，应该可以减少DOM树的分支*/
			});
		</script>

	</head>

	<body>

		<!--这个网页加载动画元素的div要放在body下面的第一个子元素的位置，因为是要在加载后面的所有元素之前运行动画的-->
		<div class="loading1">
			<div class="loading01">
				<div>加载中，稍等……<br />loading……</div>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<!--header区域开始 start-->
		<header id="header-area">
			<div id="header-div1">
				<!--<div class="show-or-hide-div"></div>-->
				<ul class="header-ul display-flex flex-wrap flex-justify-center flex-align-content-space-between">
					<li class="header-li">
						<a href="javascript:;">
							<img src="img-first-page/img_nav_logo.png" alt="" />
						</a>
					</li>
					<li class="header-li">
						<a href="index.html">首页</a>
					</li>
					<li class="header-li">
						<a href="house-move.html">搬家</a>
					</li>
					<li class="header-li">
						<a href="https://www.huolala.cn/big_truck.html">大货车</a>
					</li>
					<li class="header-li">
						<a href="https://www.hllep.com/">企业版</a>
					</li>
					<li class="header-li">
						<a href="driverJoin.html">司机加入</a>
					</li>

					<li class="header-li">
						<a href="https://lalamc.huolala.cn/">租买货车</a>
					</li>
					<li class="header-li">
						<a href="https://open.huolala.cn/">开放平台</a>
					</li>
					<li class="header-li" id="allocate-goods">
						<a href="javascript:;">发物流<img src="img-first-page/ic_job_arrow_down.png" alt="向下箭头" /></a>
						<ul class="goods-expression-ul">
							<li>
								<a href="https://wuliu.huolala.cn/" target="_blank">国内物流</a>
							</li>
							<li>
								<a href="https://www.h66.cn/" target="_blank">国际物流</a>
							</li>
						</ul>
					</li>
					<li class="header-li" id="about-us">
						<a href="javascript:;">关于我们<img src="img-first-page/ic_job_arrow_down.png" alt="向下箭头" /></a>
						<ul class="about-us-ul">
							<li>
								<a href="https://www.huolala.cn/about_us.html" target="_blank">关于我们</a>
							</li>
							<li>
								<a href="https://www.huolala.cn/join_us.html" target="_blank">加入我们</a>
							</li>
							<li>
								<a href="https://www.huolala.cn/contact_us.html" target="_blank">联系我们</a>
							</li>
							<li>
								<a href="javascript:void(0);" target="_blank">全国站点</a>
							</li>
							<li>
								<a href="https://www.huolala.cn/news_list.html" target="_blank">最新动态</a>
							</li>
						</ul>
					</li>
					<li class="header-li">
						<a href="javascript:;">下载App</a>
					</li>
					<li class="header-li search-li">

						<div class="search-div display-flex flex-justify-center flex-align-items-center">
							<input type="search" class="search-input" value="" />
							<input type="button" value="" />
						</div>
					</li>
				</ul>
			</div>
		</header>
		<!--header 部分结束 end-->
		<script type="text/javascript">
			let h1 = document.querySelector("header");

			function adjustPosition() {
				if(window.innerHeight >= document.documentElement.offsetHeight) {
					h1.style.position = "relative";
					return;
				}
				h1.style.position = "fixed";
			}
			window.onload = function() {
				adjustPosition();
			}
			window.onresize = function() {
				adjustPosition();
			}
		</script>
		<section id="main-section" class="display-flex flex-wrap flex-justify-space-around flex-align-items-start">
			<nav id="nav-area">
				<ul>
					<li>
						<a href="take-order.html">
							<div><i class="fa fa-truck"></i></div>叫车</a>
					</li>
					<li>
						<a href="look-my-order.html">
							<div><i class="fa fa-dropbox"></i></div>我的订单</a>
					</li>
					<li>
						<a href="driver-order.html">
							<div><i class="fa fa-car"></i></div>我的司机</a>
					</li>
				</ul>
				<style type="text/css">
					/*让窗口左侧边的nav区域的第二个区块：我的订单的颜色变为强调色：橙色*/
					
					#nav-area li:nth-of-type(2) a {
						color: #F16622;
					}
				</style>
			</nav>
			<section id="section-area">
				<div id="ongoing-finished-cancel">
					<ul class="display-flex flex-justify-start align-items-center">
						<li>
							<a href="javascript:;">进行中(ongoing)</a>
						</li>
						<li>
							<a href="javascript:;">已完成(finished)</a>
						</li>
						<li>
							<a href="javascript:;">已取消(cancel)</a>
						</li>
					</ul>
				</div>
				<div id="order-state-div">
					<table id="order-state-table">
						<thead>
							<th>
								订单状态
							</th>
							<th>
								订单编号
							</th>
							<th>
								订单时间
							</th>
							<th>路线</th>
							<th>
								费用
							</th>
						</thead>
						<tbody id="order-tbody">

						</tbody>
					</table>
				</div>

			</section>
		</section>
		<!--section区域结束 end-->
		<!--footer start-->
		<footer id="footer-area">
			<div class="others display-flex flex-wrap flex-justify-space-between flex-align-items-start">
				<div class="other-links">
					<!--存放公司基本业务的链接-->
					<div id="dl-div" class="display-flex flex-justify-space-around flex-align-items-start">
						<dl>
							<dt>首页</dt>
							<dd>
								<a href="index.html">产品首页</a>
							</dd>
						</dl>
						<dl>
							<dt>关于</dt>
							<dd>
								<a href="https://www.huolala.cn/about_us.html">关于我们</a>
							</dd>
							<dd>
								<a href="https://www.huolala.cn/join_us.html">加入我们</a>
							</dd>
							<dd>
								<a href="https://www.huolala.cn/contact_us.html">联系我们</a>
							</dd>
						</dl>
						<dl>
							<dt>咨询</dt>
							<dd>
								<a href="https://www.huolala.cn/company.html">公司动态</a>
							</dd>
							<dd>
								<a href="https://www.huolala.cn/industry.html">行业动态</a>
							</dd>
							<dd>
								<a href="https://www.huolala.cn/financing.html">融资快报</a>
							</dd>
						</dl>
						<dl>
							<dt>帮助</dt>
							<dd>
								<a href="https://www.huolala.cn/questions.html">常见问题</a>
							</dd>
							<dd>
								<a href="https://www.huolala.cn/feedback.html">意见反馈</a>
							</dd>
						</dl>
					</div>

					<div class="friendly-links">
						<h2>
						友情链接
					</h2>
						<div>
							<a href="https://auto.china.com/">中华汽车网</a>
							<a href="https://e.huolala.cn/" rel="nofollow">货拉拉企业版</a>
							<a href="http://www.shushi100.com/" rel="nofollow">中央空调</a>
							<a href="http://www.86huoche.com/" rel="nofollow">86货车网</a>
							<a href="http://www.jmw.com.cn/" rel="nofollow">中国加盟网</a>
							<a href="https://www.tyncar.com/" rel="nofollow">电动汽车</a>
							<a href="https://www.chezhanri.com/" rel="nofollow">车展日车展网</a>
							<a href="javascript:;" rel="nofollow">汽车家园</a>
							<a href="javascript:;" rel="nofollow">欣欣汽车时刻表</a>
							<a href="javascript:;" rel="nofollow">深圳二手房</a>
							<a href="javascript:;" rel="nofollow">新能源汽车</a>
							<a href="javascript:;" rel="nofollow">深圳装修</a>
							<a href="javascript:;" rel="nofollow">平行进口车</a>
							<a href="javascript:;" rel="nofollow">科目一</a>
							<a href="javascript:;" rel="nofollow">汽车报价大全</a>
							<a href="javascript:;" rel="nofollow">企业名录</a>
							<a href="javascript:;" rel="nofollow">九九信息网</a>
							<a href="javascript:;" rel="nofollow">汽车改装</a>
						</div>
					</div>
					<div class="private-policy">
						<a href="https://www.huolala.cn/privacy.html" rel="nofollow">隐私政策</a>
						<a href="https://www.huolala.cn/terms.html" rel="nofollow">条款及条件</a>
						<a href="index.html" rel="nofollow">深圳货拉拉科技有限公司</a>
						<a href="https://www.huolala.cn/m/index.html" rel="nofollow">移动端官网</a>
					</div>
					<div class="beian-note">
						<a href="http://beian.miit.gov.cn/" rel="nofollow">粤ICP备14091972号</a>
						<a href="javascript:;" rel="nofollow">增值电信业务经营许可证：粤B2-20170272</a>
						<a href="javascript:;" rel="nofollow">营业执照</a>
					</div>

				</div>
				<div class="focus-on-us">
					<h3>关注我们</h3>
					<ul class="focus-ul display-flex flex-wrap flex-justify-space-around flex-align-content-start flex-align-items-start">
						<li><strong>官方订阅号</strong><img src="img-first-page/扫码关注1.png" alt="扫码关注货拉拉微信公众账号图片" /></li>
						<li><strong>官方服务号</strong><img src="img-first-page/hll_user_20191216.png" alt="扫描货拉拉下单图片" /></li>
					</ul>
					<div class="call-us">
						<a href="tel:10103636"><strong>客服电话：10103636</strong></a>
					</div>
				</div>
			</div>
			<!--固定定位在窗口右边的回到顶部，联系客服的盒子div-->
			<div class="fixed-right-div">
				<div id="contactUs">
					<a href="">
						<img src="img-first-page/联系客服02.png" alt="联系客服、在线客服" />
						<br />
						<span>在线客服</span>
					</a>
				</div>
				<div id="toTop">
					<img src="img-first-page/回到顶部.png" alt="" />
					<br /> 回到顶部

				</div>

			</div>

		</footer>
		<!--footer end-->
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="commonJS/scrollToTop.js"></script>
	</body>

</html>